{*
SPDX-FileCopyrightText: © 2021 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{ extends "./base" }}
{{- import "/_libs/pagination" -}}

{{ block title() }}Label - {{ .Label }}{{ end }}

{{ block mainContent() -}}
<form action="" method="post" class="md:flex md:mb-4 items-center"
 data-controller="inplace-input"
 data-inplace-input-hidden-class="hidden">
  {{ yield csrfField() }}
  <h1 class="flex flex-grow items-baseline gap-2 group title md:mb-0">
    {{ yield icon(name="o-label", class="text-h2 h-6 w-6 mr-2", svgClass="h-6 w-6") }}
    {* JS context *}
    <span class="no-js:hidden text-h2 mr-2 cursor-pointer hover:outline-std"
     data-inplace-input-target="editable">{{ .Label }}</span>
    {* Classic input field shown in no-JS *}
    <input type="text" name="name" value="{{ .Label }}"
     class="js:hidden form-input font-semibold w-full max-w-md"
     data-inplace-input-target="value" />
    <button type="submit" class="text-h2 text-gray-300 group-hover:text-primary group-fw:text-primary"
     data-inplace-input-target="button">
      {{- yield icon(name="o-pencil", svgClass="h-6 w-6", attrs=attrList("data-inplace-input-target", "iconOff")) -}}
      {{- yield icon(name="o-check-on", class="hidden", svgClass="h-6 w-6", attrs=attrList("data-inplace-input-target", "iconOn")) -}}
    </button>
  </h1>

  {{- if !.IsDeleted -}}
    <div>
      <button class="btn-danger"
      formaction="{{ url(.Label) }}/delete" formmethod="post"
      >{{ yield icon(name="o-trash") }} Delete label</button>
    </div>
  {{- end -}}
</form>

{{- if .IsDeleted -}}
  <form action="{{ url(.Label) }}/delete" method="post" class="mb-4">
  {{ yield csrfField() }}
  {{- yield message(type="info") content -}}
    Label will be removed in a few seconds&nbsp;
    <button class="btn-primary" name="cancel" value="1">Cancel</button>
  {{- end -}}
  </form>
{{- end -}}

<turbo-frame id="bookmark-list"
 data-controller="turbo-refresh"
 data-turbo-refresh-interval-value="10"
 data-turbo-refresh-on-value="[data-bookmark-deleted='true']">

  {{- include "/_libs/pagination" .Pagination -}}

  <div class="my-4 grid lg:grid-cols-cards gap-4">
  {{- range .Bookmarks -}}
    {{- include "./components/card" . -}}
  {{- end -}}
  </div>

  {{- include "/_libs/pagination" .Pagination -}}
</turbo-frame>
{{- end }}
